<!-- 商圈管理 -->
<template>
	<div class="labemanage">
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom:15px;">
            <el-breadcrumb-item>交易中心</el-breadcrumb-item>
            <el-breadcrumb-item>资产招租</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-bottom: 15px;">
        	<el-button type="primary" @click="fn('add')">新增</el-button>
        </div>
        <el-table :data="tableData" border stripe v-loading="tableLoading">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column label="类型编号" prop="labelTypeCode"></el-table-column>
            <el-table-column label="标签类型" prop="labelTypeName"></el-table-column>
            <el-table-column label="标签编号" prop="labelCode"></el-table-column>
            <el-table-column label="标签名称" prop="labelName"></el-table-column>
            <el-table-column label="icon">
                <template slot-scope="scope">
                    <img :src="scope.row.iconUrl" alt="" style="width: 100px;height: 50px;">
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="fn('edit',scope.row.id)">编辑</el-button>
                    <el-button type="text" size="small" @click="fn('del',scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" style="margin-top:30px;">
	    </el-pagination>
	    <!-- 标签的dialog -->
	    <el-dialog :title="type=='add'?'新增':'编辑' " :visible.sync="centerDialogVisible" width="30%">
	    	<el-form :model="params1" :rules="rules" label-width="120px" ref="form">
	            <el-form-item label="标签类型：" prop="labelTypeCode">
	                <el-select v-model="params1.labelTypeCode">
	                    <el-option v-for="(item,index) in labelTypeCodes"
	                               :key="index"
	                               :label="item.value"
	                               :value="item.id">
	                    </el-option>
	                </el-select>
	            </el-form-item>
	            <el-form-item label="标签名称：" prop="labelName">
	                <el-input v-model="params1.labelName " style="width: 217px"></el-input>
	            </el-form-item>
	            <el-form-item label="icon：" class="icon">
	                <uploadImg @uploadSuccess="uploadSuccess" v-model="this.params1.iconUrl"></uploadImg>
	            </el-form-item>
	            <el-form-item>
	                <el-button type="primary" @click="save" :loading="loading">保存</el-button>
	                <el-button type="primary" @click="cancel">取消</el-button>
	            </el-form-item>
	        </el-form>
	    </el-dialog>
	</div>
</template>

<script>
	import uploadImg from "../../../components/common/uploadImg"
	export default{
		name:"labelmanage",
		data(){
			return {
				type:"",
				centerDialogVisible:false,
				labelTypeCodes:[],
        		loading:false,
				tableData: [],
		        params:{
		            pageNum: 1,
		            pageSize:10
		        },
		        params1:{
		            iconUrl:"",
		            labelName:"",
		            labelTypeCode:"100"
		        },
		        tableLoading: false,
		        total:0,
		        rules:{
		            labelTypeCode:[{required: true,message:"请选择标签类型",trigger:"change"}],
		            labelName:[{
		                required: true,
		                validator: (rule, value, callback) => {
		                    if (!value) {
		                        return callback(new Error('请填写标签名称'));
		                    }
		                    if(value.length > 20){
		                        return callback(new Error('标签名称小于等于20字符'));
		                    }
		                    callback();
		                }
		            }]
		        }
			}
		},
		methods:{
			uploadSuccess(res){
				this.params1.iconUrl=res;
			},
			fn(type,id){
				this.type=type;
	            if(type=="add"){
	            	this.params1.labelName="";
	            	this.params1.iconUrl="";
	                this.centerDialogVisible=true;
	                this.loadLabel();
	            }else if(type=="del"){
	                this.$confirm('确认删除吗？', '提示', {
	                    confirmButtonText: '确定',
	                    cancelButtonText: '取消',
	                    type: 'warning'
	                }).then(()=>{
	                	let formData=new FormData();
	            		formData.set("id",id);
	                    this.$axios.post(`/tenement/label/delete`, formData).then((res) => {
	                    	this.loadData();
	                        this.$message({
								message: '删除成功',
								type: 'success'
							});
	                    });
	                }).catch(()=>{

	                })

	            }else if(type=="edit"){
	                this.loadLabel();
	                this.loadUpdateData(id);
	            }
	        },
	        loadData() {
	            this.tableLoading = true;
	            let formData=new FormData();
	            formData.set("pageNum",this.params.pageNum);
	            formData.set("pageSize",this.params.pageSize);
	            this.$axios.post(`/tenement/label/list`, formData).then((res) => {
	                this.tableLoading = false;
	                this.tableData=res.list;
	                this.total=res.total;
	            });
	        },
	        handleSizeChange(val) {
	            this.params.pageSize = val;
	            this.loadData();
	        },
	        handleCurrentChange(val) {
	            this.params.pageNum = val;
	            this.loadData();
	        },
	        loadLabel(){
	            this.$axios.post(`/tenement/share/selectDicByType`,{type:"LABEL_TYPE"}).then(res => {
	                this.labelTypeCodes=res;
	            });

	        },
	        save(){
	            this.$refs['form'].validate((valid)=>{
	                if(!valid){
	                    return
	                }
	                if(this.params1.iconUrl==""){
	                	this.$message({
							showClose: true,
							message: '请上传图片',
							type: 'warning',
							onClose:()=>{
								
							}
						});
						return
                    }
	                this.loading=true;
	                if(this.type=="add"){
	                	let params={}
	                	params.iconUrl=this.params1.iconUrl;
	                	params.labelName=this.params1.labelName;
	                	params.labelTypeCode=this.params1.labelTypeCode;
	                	this.$axios.post('/tenement/label/add',params).then((res)=>{
		                	this.$message({
								showClose: true,
								message: '操作成功',
								type: 'success',
								onClose:()=>{
									this.loading=false;
	                                this.centerDialogVisible=false;
	                                this.loadData();
								}
							});
		                }).catch((error)=>{
		                	console.log(error);
		                	this.loading=false;
		                })
	                }else{
	                	let formData=new FormData();
	            		formData.set("id",this.params1.id);
	            		formData.set("labelName",this.params1.labelName);
	            		formData.set("iconUrl",this.params1.iconUrl);
	                	this.$axios.post('/tenement/label/update',formData).then((res)=>{
		                    this.$message({
								showClose: true,
								message: '操作成功',
								type: 'success',
								onClose:()=>{
									this.loading=false;
	                                this.centerDialogVisible=false;
	                                this.loadData();
								}
							});
		                }).catch((error)=>{
		                	console.log(error);
		                	this.loading=false;
		                })
	                }
	                
	            })
	        },
	        cancel(){
	            this.centerDialogVisible=false;
	        },
	        loadUpdateData(id){
	        	this.fileList=[];
	        	let formData=new FormData();
	            	formData.set("id",id);
	            this.$axios.post('/tenement/label/selectById',formData).then((res)=>{
	                this.params1=res;
	                this.centerDialogVisible=true;
	            })
	        },
		},
		created(){

		},
		mounted(){
			this.loadData();
		},
		components:{
			uploadImg
		}
	}
</script>

<style lang="stylus">
	.labemanage{
		.icon{
			.el-form-item__label:before{
	            content: '*';
	            color: #f56c6c;
	            margin-right: 4px;
	        }
		}
	}
	
</style>

